<template>
  <div class="app-container">
    <el-row>
      <el-col :span="14" :offset="5">
        <el-card style="height: 450px">
          <div slot="header">
            <span>页面设置</span>
          </div>
          <el-row>
            <el-col :span="16">
              <!--普通表单-->
              <el-form ref="ruleForm" :model="form" label-width="120px" :rules="rules">
                <el-form-item label="登录页标题" prop="title">
                  <el-input v-model="form.title" />
                </el-form-item>

                <el-form-item label="登录页背景色" prop="colour">
                  <el-color-picker v-model="form.colour" />
                </el-form-item>

              </el-form>
            </el-col>
          </el-row>
          <div style="margin-top: 80px; float: right">
            <el-button @click="cancelAlert">取消修改</el-button>
            <el-button type="primary" @click="submitForm">保存修改</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { putConfig } from '@/api/system/setting'
export default {
  name: 'PersonInfo',
  data() {
    return {
      // 表单数据
      form: {
        id: null,
        colour: '#2d3a4b',
        title: null
      },
      rules: {
        colour: [
          { required: true, message: '请输入背景色', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    // 获得user信息
    ...mapGetters(['id', 'name', 'roles', 'finishTime', 'mainTit', 'mainColor'])
  },
  created() {
    this.form.colour = this.mainColor
    this.form.title = this.mainTit
  },
  methods: {
    // 添加和更新的提交表单
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // 更新记录
          putConfig(this.form).then((res) => {
            if (res.status === 200) {
              this.$message.success('修改成功')
              this.dialogFormVisible = false // 关闭对话框
              this.cancelAlert()
            } else {
              if (res.status === 501) this.$message.error(res.message)
              else this.$message.error('修改失败')
            }
          })
        }
      })
    },

    cancelAlert() {
      this.$store.dispatch('settings/changeMainSet').then(res => {
        this.form = res
      })
    }
  }
}
</script>

<style scoped></style>
